.ps {
  $r: &;
  &__rail-y {
    background-color: rgba(121, 121, 121, 0.8);
    width: 5px;
    &:hover {
      #{$r}__thumb-y {
        width: 5px;
        right: 0;
      }
    }
  }
  &__rail-x {
    background-color: rgba(121, 121, 121, 0.8);
    width: 5px;
    &:hover {
      height: 4px;
      background-color: transparent !important;
      opacity: 0.4 !important;
      #{$r}__thumb-x {
        height: 5px;
        right: 0;
      }
    }
  }
  &__thumb-x,
  &__thumb-y {
    background-color: rgba(121, 121, 121, 0.8);
  }
  &__thumb-y {
    width: 5px;
    right: 0;
  }
  &__thumb-x {
    height: 5px;
  }
}


.ti-tags {
  background-color: var(--color-bg) !important;
}
.ti-tag {
  background-color: var(--color-contrast-lower) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.ti-new-tag-input {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}
.ti-selected-item {
  background-color: var(--color-primary) !important;
}
.ti-deletion-mark {
  background-color: var(--color-tag-delete) !important;
}
.ti-autocomplete {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-bg) !important;
}

.toast-container {
  .toast {
    width: 400px;
    &-text {
      display: flex;
      align-items: center;
    }
  }
}

.v-popper {
  &--theme-tooltip {
    .v-popper {
      &__inner {
        font-size: 12px;
        padding: 4px 8px !important;
        border-radius: 3px !important;
      }
      &__arrow-container {
        display: none;
      }
    }
  }
}

.toast {
  code {
    background-color: #eee;
    border-radius: 3px;
    padding: 0 4px;
  }
}
